{% extends 'profileapp/profile/base_cabinet_index.html' %}

{% load static %}

{% block title %}
{{ title }}
{% endblock %}
{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core/main.js"></script>
    <script src="{% static 'fullcalendar/dist/index.global.js' %}"></script>
{#    <script type="application/ld+json">{#}
{#		"@context": "http://schema.org",#}
{#		"@type": "Organization",#}
{#		"name": "",#}
{#		"logo": "images/default-logo.png"#}
{#    }</script>#}
{% endblock %}
{% block styles %}
        <link rel="stylesheet" href="{% static 'ProfileApp/css/blog.css' %}">
{#    <style>#}
{#        .sidenav {#}
{#            height: 100%;#}
{#            width: 250px;#}
{#            position: fixed;#}
{#            top: 0;#}
{#            left: 0;#}
{#            background-color: #333; /* Цвет фона */#}
{#            padding-top: 20px;#}
{#            z-index: 1; /* Устанавливаем z-index для боковой панели */#}
{#        }#}
{##}
{#        /* Стили для пунктов меню */#}
{#        .sidenav a {#}
{#            padding: 15px 25px;#}
{#            text-decoration: none;#}
{#            font-size: 18px;#}
{#            color: #fff; /* Цвет текста */#}
{#            display: block;#}
{#        }#}
{##}
{#        /* Стили для активного пункта меню */#}
{#        .sidenav a.active {#}
{#            background-color: #4CAF50; /* Цвет активного пункта */#}
{#        }#}
{##}
{#        /* Стили для контента, сдвигаемого вправо */#}
{#        .content {#}
{#            margin-left: 250px; /* Ширина боковой панели */#}
{#            padding: 20px;#}
{#            z-index: 1; /* Устанавливаем z-index для контента */#}
{#        }#}
{##}
{#                .sidenav {#}
{#            height: 100%;#}
{#            width: 250px;#}
{#            position: fixed;#}
{#            top: 0;#}
{#            left: 0;#}
{#            background-color: #333; /* Цвет фона */#}
{#            padding-top: 20px;#}
{#            z-index: 1; /* Устанавливаем z-index для боковой панели */#}
{#        }#}
{##}
{#        /* Стили для пунктов меню */#}
{#        .sidenav a {#}
{#            padding: 15px 25px;#}
{#            text-decoration: none;#}
{#            font-size: 18px;#}
{#            color: #fff; /* Цвет текста */#}
{#            display: block;#}
{#        }#}
{##}
{#        /* Стили для активного пункта меню */#}
{#        .sidenav a.active {#}
{#            background-color: #4CAF50; /* Цвет активного пункта */#}
{#        }#}
{##}
{#        /* Стили для контента, сдвигаемого вправо */#}
{#        .content {#}
{#            margin-left: 250px; /* Ширина боковой панели */#}
{#            padding: 20px;#}
{#            z-index: 1; /* Устанавливаем z-index для контента */#}
{#        }#}
{#    </style>#}
{% endblock %}

{% block modals %}

{% endblock %}

{% block content %}

<section data-bs-version="5.1" class="article8 cid-tT4ZBrVYs7" id="article08-8">
    <div class="container blog-container">
        <div class="row justify-content-center">
            <div class="u-container-layout u-valign-middle u-container-layout-1">
                <!-- Добавьте стили width и height к img -->
                <img alt="" class="u-blog-control u-expanded-width u-image u-image-default u-image-1"
                     src="{% if posts.images %}{{ posts.images.url }}{% else %}{% static 'image/profile_img/img.png' %}{% endif %}"
                     style="max-width: 100%; height: auto;"> <!-- Измените значения width и height по вашему усмотрению -->
                <h2 class="u-blog-control u-text u-text-1 text-center">{{ posts.title }}</h2>
                <div class="u-align-justify u-blog-control u-post-content u-text u-text-2 fr-view">
                    {{ posts.content|safe }}
                </div>
                <div class="u-blog-control u-metadata u-metadata-1">
                    <span class="u-meta-date u-meta-icon">{{ posts.date_create }}</span>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="{% static 'assets/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'assets/smoothscroll/smooth-scroll.js' %}"></script>
<script src="{% static 'assets/ytplayer/index.js' %}"></script>
<script src="{% static 'assets/dropdown/js/navbar-dropdown.js' %}"></script>
<script src="{% static 'assets/theme/js/script.js' %}"></script>

<style>
    .blog-container {
        max-width: 800px;
        padding: 20px;
        margin: 0 auto;
    }
</style>
{% endblock %}

{% block script %}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>{% endblock %}